/**
 * 我的画像-风险管理View
 */
import { Col, Radio, Row, Tooltip, Affix, Spin } from "antd";
import { inject, observer } from "mobx-react";
import { WeaAlertPage,WeaNewScroll } from 'ecCom';
import React from "react";
import * as Util from "../../../util/Util";
import { i18n } from "../../../public/i18n";

@inject("individualMainStore")
@observer
export default class RiskManagerView extends React.Component {
  constructor(props) {
    super(props);
    this.store = this.props.individualMainStore;
  }

  componentWillMount() {
    this.getData();
  }

  getData() {
    const { individualMainStore: store } = this.props;
    const { loadTabData } = store;
    loadTabData();
  }

  onDateConditionChange(event) {
    const { individualMainStore: store } = this.props;
    const { loadIndividualRiskData, setRiskDateCond } = store;
    setRiskDateCond(event.target.value);
    loadIndividualRiskData();
  }

  renderDataCardList() {
    const { individualMainStore: store } = this.props;
    const { individualRiskData: data } = store;
    const noData = (
      <div style={{ width: "100%", height:  Util.getCurrentHeight()-276 ,background:"#fff",margin:"20px auto"}}>
        <WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@y4msny`} icon={<i className="icon-coms-NoData" />} iconSize={60} >
          <div style={{ textAlign: "center", marginTop: "4px" }}>
            {i18n.message.onNoData()}
          </div>
        </WeaAlertPage>
      </div>
    )
    if (!data || data.length <= 0) {
      return noData;
    } else {
      return data.map((v, i) => {
        return i % 2 === 0 ? (
          <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@i1yj2d@${i}`} gutter={16} key={i}>
            {data.slice(i, i % 2 === 0 ? i + 2 : i % 2).map((y, j) => {
              return (
                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@i8ytbb@${i}`} xs={24} sm={24} md={24} lg={12} xl={12}>
                  <div className="data-card-wrapper" id="risk-data-container">
                    <i className={`icon-wrapper ${y.icon}`} />
                    <Affix ecId={`${this && this.props && this.props.ecId || ''}_Affix@xk5o0e@${i}`}
                      target={() =>
                        document.getElementById("risk-data-container")
                      }
                      offsetTop={0}
                    >
                      <div className="title-row">
                        <span className="title-span">{y.name}</span>
                      </div>
                    </Affix>
                    <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@g1ohew@${i}`} height={204} className="data-list-wrapper">
                        {y.items &&
                          y.items.length > 0 &&
                          y.items.map((z, k) => {
                            return (
                              <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@k8x7um@${k}`} className="data-row" key={k}>
                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@jvw4iz@${k}`} span={24} className="data-col">
                                  <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@uqbfbk@${k}`} title={z.name}>
                                    <span className="name-span">{z.name}</span>
                                  </Tooltip>
                                  {z.hasRate === 1 && (
                                    <span className="rate-span">
                                      {i18n.label.frequency()}：{z.records.length}
                                    </span>
                                  )}
                                  <span className="count-span">
                                    {z.riskValue}
                                  </span>
                                </Col>
                              </Row>
                            );
                          })}
                    </WeaNewScroll>
                  </div>
                </Col>
              );
            })}
          </Row>
        ) : null;
      });
    }
  }

  render() {
    const { individualMainStore: store } = this.props;
    const {
      loadings: { riskDataLoading },
      riskDateCond,
      hasRight,
    } = store;
  
    if (!hasRight) {
      return Util.renderAlertPage(
        "<span style='color:red'>" + i18n.message.authFailed() + "</span>",
        "",
        "30%",
        Util.getCurrentHeight()-151,
        this.props.ecId || ''
      );
    }
    return (
      <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@jtqemu`} spinning={riskDataLoading}>
        <div className="wea-wr-portrait-risk-container" style={{minHeight:Util.getCurrentHeight()-150}}>
          <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@1ubx9u`}>
            <div className="date-condition">
              <Radio.Group ecId={`${this && this.props && this.props.ecId || ''}_undefined@s78y65`}
                value={riskDateCond}
                buttonStyle="solid"
                size="middle"
                onChange={(event) => {
                  this.onDateConditionChange(event);
                }}
                optionType="button"
              >
                <Radio.Button ecId={`${this && this.props && this.props.ecId || ''}_undefined@fvd1nu`} value={2}>{i18n.button.in3Days()}</Radio.Button>
                <Radio.Button ecId={`${this && this.props && this.props.ecId || ''}_undefined@4634o9`} value={6}>{i18n.button.in7Days()}</Radio.Button>
                <Radio.Button ecId={`${this && this.props && this.props.ecId || ''}_undefined@y90qwb`} value={29}>{i18n.button.in30Days()}</Radio.Button>
              </Radio.Group>
            </div>
          </Row>

          {this.renderDataCardList()}
        </div>
      </Spin>
    );
  }
}
